<template>
	<div>
		<el-card class="!border-none pt-4" shadow="never">
			<el-form class="ls-form" :model="formData" inline>
				<el-form-item label="产品名称">
					<el-input class="w-[280px]" placeholder="请输入" v-model="formData.admin_name" clearable/>
				</el-form-item>
				<el-form-item label="产品型号">
					<el-select class="w-[280px]" v-model="formData.type" placeholder="请选择">
						<el-option v-for="(item, index) in visitType" :key="index" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="产品状态">
					<el-select class="w-[280px]" v-model="formData.type" placeholder="请选择">
						<el-option v-for="(item, index) in visitType" :key="index" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" >查询</el-button>
					<el-button >重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none mt-4" shadow="never">
			<div class="v-flex v-row-right">
				<el-button class="w-[90px] h-[36px]" color="#0054A6" type="primary" >
					<router-link :to="{
					        path: getRoutePath('product.product/AddProduct'),
					        query: {
					            id:1
					        }
					    }">
						<span>添加</span>
					</router-link>
				</el-button>
				<el-button class="w-[90px] h-[36px]" color="#0054A6" type="primary" >导入</el-button>
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="产品编号" prop="name" align="center" />
				<el-table-column label="产品名称" prop="询价单" align="center" />
				<el-table-column label="产品分类" prop="询价单" align="center" />
				<el-table-column label="型号" prop="询价单" align="center" />
				<el-table-column label="产品图号" prop="询价单" align="center" />
				<el-table-column label="库存" prop="询价单" align="center" />
				<el-table-column label="创建人" prop="询价单" align="center" />
				<el-table-column label="状态" prop="询价单" align="center">
					<template #default="{ row }">
						<el-switch 
							style="--el-switch-on-color:#0256A7; --el-switch-off-color: #CED1D6" />
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center">
					<template #default="{ row }">
						<el-button type="primary" link>
							<span class="main-color1">编辑</span>
						</el-button>
						<el-button type="primary" link @click="handleDelete">
							<span class="main-color1">删除</span>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<div class="p-[20px] v-flex v-row-right">
			<el-pagination color="#0054A6" background layout="prev, pager, next" :default-page-size="6"
				:total="1000" :pager-count="6" />
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { computed, onMounted, reactive, ref, shallowRef } from 'vue'
	import { getRoutePath } from '@/router'
	import feedback from '@/utils/feedback'
	const formData = reactive({
		admin_name: '',
		url: '',
		ip: '',
		type: '',
		start_time: '',
		end_time: ''
	})
	// 产品分类
	const visitType = ref<Array<any>>([
		{
			label: '反击破配件',
			value: '1'
		},
		{
			label: '鄂破配件',
			value: '2'
		},
	])
	const lists = ref<Array<any>>([
		{}, {}, {}
	])
	const handleDelete = async (id: number) => {
	    await feedback.confirm('确定要删除该信息吗？')
	}
</script>
<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label {
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}

	.el-set-form:deep() .el-input__inner {
		height: 36px;
	}

	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}
	:deep() .el-dialog__title {
		color: var(--el-text-color-main);
	}

	:deep() .el-pagination.is-background .el-pager li.is-active {
		background-color: var(--el-text-color-main);
	}
</style>